<template>
  <view class="course-container">
    <!-- 课程状态切换 -->
    <view class="status-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', currentTab === tab.type ? 'active' : '']"
        @tap="switchTab(tab.type)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 课程列表 -->
    <view class="course-list">
      <view class="course-item" v-for="(course, index) in courseList" :key="index" @tap="viewCourseDetail(course)">
        <image class="course-image" :src="course.image" mode="aspectFill"></image>
        <view class="course-info">
          <text class="course-name">{{ course.name }}</text>
          <text class="course-teacher">{{ course.teacherName }}</text>
          <view class="course-progress">
            <text class="progress-text">已学习 {{ course.progress }}%</text>
            <view class="progress-bar">
              <view class="progress-inner" :style="{ width: course.progress + '%' }"></view>
            </view>
          </view>
          <view class="course-footer">
            <text class="course-time">{{ course.nextClass }}</text>
            <button class="enter-btn" @tap.stop="enterClass(course)" v-if="course.canEnter">进入课堂</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'ongoing',
      tabs: [
        { name: '进行中', type: 'ongoing' },
        { name: '已完成', type: 'completed' }
      ],
      courseList: [
        {
          id: 1,
          name: '高中数学一对一辅导',
          teacherName: '张老师',
          progress: 60,
          nextClass: '下节课：今天 15:30',
          image: '/static/course-default.png',
          canEnter: true
        },
        // 更多课程数据...
      ]
    }
  },
  methods: {
    switchTab(type) {
      this.currentTab = type
      this.loadCourses(type)
    },
    loadCourses(type) {
      // 加载课程数据
    },
    viewCourseDetail(course) {
      uni.navigateTo({
        url: `/pages/course/detail?id=${course.id}`
      })
    },
    enterClass(course) {
      uni.navigateTo({
        url: `/pages/course/classroom?id=${course.id}`
      })
    }
  }
}
</script>

<style>
.course-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.status-tabs {
  display: flex;
  background: #fff;
  padding: 20rpx 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #4080FF;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #4080FF;
  border-radius: 2rpx;
}

.course-list {
  padding: 20rpx;
}

.course-item {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.course-image {
  width: 100%;
  height: 300rpx;
}

.course-info {
  padding: 20rpx;
}

.course-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.course-teacher {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.course-progress {
  margin-bottom: 20rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.progress-bar {
  height: 6rpx;
  background: #eee;
  border-radius: 3rpx;
}

.progress-inner {
  height: 100%;
  background: #4080FF;
  border-radius: 3rpx;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-time {
  font-size: 24rpx;
  color: #ff6b6b;
}

.enter-btn {
  min-width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  border-radius: 30rpx;
  background: #4080FF;
  color: #fff;
  margin: 0;
}
</style> 